import { Button, Descriptions, Space } from 'antd';
import React from 'react';

export default () => {
    const [db, setDb] = React.useState<IDBDatabase | null>();

    function createDB() {
        const request = window.indexedDB.open('why');
        request.onsuccess = function () {
            setDb(request.result);
            console.log(request.result.objectStoreNames);
        };
        request.onupgradeneeded = function (event: any) {
            
        };
    }
    function updateDB() {
        const request = window.indexedDB.open('why', 2);
        request.onupgradeneeded = function (event: any) {
            const result = event.target.result
            result.createObjectStore('why', {
                keyPath: 'id'
            })
            result.createObjectStore('zhy', {
                autoIncrement: true
            })
            const wcxStore: IDBObjectStore = result.createObjectStore('wcx', {
                keyPath: 'id'
            })
            wcxStore.createIndex('name', 'name', { unique: false })
            const czxStore: IDBObjectStore =result.createObjectStore('czx', {
                keyPath: 'id'
            })
            czxStore.createIndex('name', 'name', { unique: false })
            setDb(result)
        };
        request.onsuccess = function () {};
        request.onerror = function () {};
    }
    function deleteDB() {
        window.indexedDB.deleteDatabase('why');
        window.location.reload();
    }
    return (
        <Descriptions
            title="数据库信息"
            extra={
                <Space>
                    <Button onClick={createDB} disabled={Boolean(db)}>
                        创建/打开数据库
                    </Button>
                    <Button onClick={updateDB} disabled={Boolean(db)}>
                        升级数据库
                    </Button>
                    <Button onClick={deleteDB}>删除数据库</Button>
                </Space>
            }
            bordered
        >
            <Descriptions.Item label="数据库名">{db?.name}</Descriptions.Item>
            <Descriptions.Item label="数据库版本">{db?.version}</Descriptions.Item>

            {/* <Descriptions.Item label="数据库版本">{db?.objectStoreNames}</Descriptions.Item> */}
        </Descriptions>
    );
};
